<template>
  <div class="detail-container">
    <h2>商品报表</h2>
    <div class="good-container">
        <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">商品名称</th>
            <th scope="col">商品单价</th>
            <th scope="col">购买数量</th>
            <th scope="col">商品花销</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in goodList.detail" :key="item.recordsId">
            <th scope="row">{{ index+1 }}</th>
            <td>{{ item.goodName }}</td>
            <td>￥{{( item.goodDiscount!=0?item.goodDiscount:item.goodPrice ).toFixed(2)}}</td>
            <td>{{item.goodCount}}</td>
            <td>￥{{(item.goodCount*(item.goodDiscount!=0?item.goodDiscount:item.goodPrice)).toFixed(2)}}</td>
          </tr>
        </tbody>
    </table>
    </div>
    <button class="back" @click="back">回到详情页</button>
  </div>
</template>

<script>
export default {
    data (){
        return{
            goodList:[]
        }
    },
    methods:{
        back(){
            this.$router.go(-1)
        }
    },
    mounted(){
        this.goodList = this.$route.query
    }
}
</script>

<style lang="less">
    .detail-container{
        width: 95%;
        height: 95%;
        position: relative;
        background-color: #ffffff;
        box-sizing: border-box;
        padding: 15px;
        border-radius: 10px;
        .good-container{
            position: absolute;
            height: 85%;
            width: 100%;
            max-height: 90%;
            overflow: auto;
        }
        .back{
            border: 0 solid #ffffff;
            position: absolute;
            background-color: #5b5a5a;
            box-sizing: border-box;
            padding: 10px;
            color: #ffffff;
            font-size: 12px;
            border-radius: 15px;
            bottom: 20px;
        }
    }
</style>